<div id='trace-controls' class='card w-90 mb-4 bg-light'>
<div class="clearfix m-3">
<div class='row justify-content-start'>
    <div class='col-md-2'><div href='#'><strong data-i18n="trace.duration">Duration:</strong> <span class='badge badge-dark'>{{durationStr}}</span></div></div>
    <div class='col-md-2'><div href='#'><strong data-i18n="trace.service">Services:</strong> <span class='badge badge-dark'>{{serviceNameAndSpanCounts.length}}</span></div></div>
    <div class='col-md-2'><div href='#'><strong data-i18n="trace.depth">Depth:</strong> <span class='badge badge-dark'>{{depth}}</span></div></div>
    <div class='col-md-2'><div href='#'><strong data-i18n="trace.spanCount">Total Spans:</strong> <span class='badge badge-dark'>{{spans.length}}</span></div></div>
    <div class='col-md-2'>
      {{#logsUrl}}
      <div id='traceLogsLink'>
        <a class='btn btn-sm btn-secondary'  href='{{ logsUrl }}' target="_blank" role="button">Logs
          <span class="fas fa-external-link-square-alt"></span>
        </a>
      </div>
      {{/logsUrl}}
    </div>
    <div class="col-md-2">
      <span class='btn btn-sm btn-secondary float-right' href='{{ contextRoot }}api/v2/trace/{{ traceId }}' id='traceJsonLink'>JSON
        <span class="fas fa-download"></span>
      </span>
    </div>
  </div>

  <form class='form-row mt-3' role='form'>
    <div class='form-group col-md-3' id='filterAllServices'>
      <button id= 'expandAll' type='button' class='btn btn-primary' value='uiExpandAllSpans'
      data-i18n="trace.expand">Expand All</button>
      <button id= 'collapseAll' type='button' class='btn btn-primary' value='uiCollapseAllSpans'
      data-i18n="trace.collapse">Collapse All</button>
    </div>
  </form>
  <div class='trace-details services'>
  {{#serviceNameAndSpanCounts}}
    <span class='badge badge-info service-filter-label' data-service-name='{{serviceName}}'>{{serviceName}} x{{spanCount}}</span>
  {{/serviceNameAndSpanCounts}}
  </div>
 </div>
</div>

<div id='trace-container' class="w-100">
  <div id='timeLabel' class='span'>
    <div class='handle'>Services</div>
    <div class='duration-container'>
      {{#timeMarkers}}
      <div class='time-marker time-marker-{{index}}'>{{time}}</div>
      {{/timeMarkers}}
    </div>
  </div>

  {{#spans}}
  <div
    id='{{spanId}}'
    class='span service-span depth-{{depthClass}}'
    data-keys='id,traceId,parentId,spanName,serviceNames,serviceName,durationStr,duration'
    data-id='{{spanId}}'
    data-trace-id='{{traceId}}'
    data-parent-id='{{parentId}}'
    data-span-name='{{spanName}}'
    data-service-name='{{serviceName}}'
    data-service-names='{{serviceNames}}'
    data-duration-str='{{durationStr}}'
    data-duration='{{duration}}'
    data-child-ids='{{childIds}}'
    data-error-type='{{errorType}}'
  >
    <div class='handle'>
      <div class='service-name' style='margin-left: {{depth}}px'>
        <span class='expander'></span>
        <span class='text-truncate' data-toggle="tooltip"
        title={{serviceName}}>{{serviceName}}</span>
      </div>
    </div>

    <div class='duration-container row'>
      {{#timeMarkers}}
      <div class='col time-marker time-marker-{{index}}'>.</div>
      {{/timeMarkers}}

      <div class='duration ml-3' style='left: {{left}}%; width: {{width}}%'>
        {{durationStr}} : {{spanName}}
        {{#annotations}}
        <div class='annotation{{#isDerived}} derived{{/isDerived}}'
          style='left: {{left}}%; width: {{width}}px'
          title='{{value}}'
          data-keys='endpoint,value,timestamp,relativeTime,serviceName'
          data-endpoint='{{endpoint}}'
          data-value='{{value}}'
          data-timestamp='{{timestamp}}'
          data-relative-time='{{relativeTime}}'
          data-service-name='{{serviceName}}'
        ></div>
        {{/annotations}}
      </div>
    </div>

    {{#tags}}
    <div class='tag'
      data-keys='key,value'
      data-key='{{key}}'
      data-value='{{value}}'
    ></div>
    {{/tags}}
  </div>
  {{/spans}}
</div>

<div class='modal fade' id='spanPanel' tabindex='-1' role="dialog"  aria-hidden="true">
  <div class='modal-dialog modal-lg'>
    <div class='modal-content'>
      <div class='modal-header'>
        <h4 class='modal-title'></h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class='modal-body'>
       <div class="card">
        <h6 class="card-body">Services: <span class='service-names container'></span></h6>
       </div>
        <table id='annotations' class='table table-striped table-sm table-bordered'>
          <thead class="table-info"><tr>
            <th>Date Time</th>
            <th>Relative Time</th>
            <th>Annotation</th>
            <th>Address</th>
          </tr></thead>
          <tbody>
            <tr>
              <td class='key local-datetime' data-key='timestamp'></td>
              <td class='key' data-key='relativeTime'></td>
              <td class='value' data-key='value'></td>
              <td class='value' data-key='endpoint'></td>
            </tr>
          </tbody>
        </table>

        <table id='tags' class='table table-striped table-sm table-bordered'>
          <thead class="table-info"><tr>
            <th>Key</th>
            <th>Value</th>
          </tr></thead>
          <tbody>
            <tr>
              <td class='key' data-key='key'></td>
              <td class='value' data-key='value'></td>
            </tr>
          </tbody>
        </table>

        <button class="btn btn-info btn-sm pull-right mt-1" type="button" data-toggle="collapse"
                data-target="#showIds" aria-expanded="false" aria-controls="showIds" data-i18n="trace.showIds">More Info
                <span class="fas fa-chevron-circle-down"></span>
        </button>
        <hr/>
        <div class='clearfix'></div>
        <div id='showIds' class='collapse'>
          <table class='table table-striped table-sm table-bordered'>
            <tbody>
              <tr>
                <td class='key' data-key='key'></td>
                <td class='value' data-key='value'></td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>

<div class='row' id='trace-container-backup' hidden>
  <div id='timeLabel-backup' class='span'>
    <div class='handle'>Services</div>
    <div class='duration-container'>
      {{#timeMarkersBackup}}
      <div class='time-marker time-marker-{{index}}'>{{time}}</div>
      {{/timeMarkersBackup}}
    </div>
  </div>

  {{#spansBackup}}
  <div
    id='{{spanId}}'
    class='span service-span depth-{{depthClass}}'
    data-keys='id,traceId,parentId,spanName,serviceNames,serviceName,durationStr,duration'
    data-id='{{spanId}}'
    data-trace-id='{{traceId}}'
    data-parent-id='{{parentId}}'
    data-span-name='{{spanName}}'
    data-service-name='{{serviceName}}'
    data-service-names='{{serviceNames}}'
    data-duration-str='{{durationStr}}'
    data-duration='{{duration}}'
    data-child-ids='{{childIds}}'
  >
    <div class='handle'>
      <div class='service-name' style='margin-left: {{depth}}px'>
        <span class='expander'>+</span>
        {{serviceName}}
      </div>
    </div>

    <div class='duration-container'>
      {{#timeMarkersBackup}}
      <div class='time-marker time-marker-{{index}}'>.</div>
      {{/timeMarkersBackup}}

      <div class='duration' style='left: {{left}}%; width: {{width}}%'>
        {{durationStr}} : {{spanName}}
        {{#annotations}}
        <div class='annotation{{#isDerived}} derived{{/isDerived}}'
          style='left: {{left}}%; width: {{width}}px'
          title='{{value}}'
          data-keys='endpoint,value,timestamp,relativeTime,serviceName'
          data-endpoint='{{endpoint}}'
          data-value='{{value}}'
          data-timestamp='{{timestamp}}'
          data-relative-time='{{relativeTime}}'
          data-service-name='{{serviceName}}'
        ></div>
        {{/annotations}}
      </div>
    </div>

    {{#tags}}
    <div class='tag'
      data-keys='key,value'
      data-key='{{key}}'
      data-value='{{value}}'
    ></div>
    {{/tags}}
  </div>
  {{/spansBackup}}
</div>

<div class='modal fade' id='jsonPanel' tabindex='-1' role="dialog"  aria-hidden="true">
  <div class='modal-dialog modal-lg'>
    <div class='modal-content'>
      <div class='modal-header bg-light'>
        <h4 class='modal-title'></h4>
        <a href='#' class='save ml-5 btn btn-outline-dark'>
          <span class='fa fa-download fa-2x' style="color: black;" aria-hidden='true' aria-label='save'></span>
        </a>
        <a class='copy btn btn-outline-dark' id="copy2clipboard">
          <span class='fa fa-copy fa-2x' style="color: black;" aria-hidden='true' aria-label='save'></span>
        </a>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class='modal-body bg-dark'>
        <pre><code class="text-light" id="trace-json-content"/></pre>
      </div>
    </div>
  </div>
</div>
